<template>
    <div class="category">
        <div class="img-wrapper">
            <img src="https://img.tuguaishou.com/ips_templ_preview/2d/de/73/lg_2955149_1614915704_6041a878e3c9e.jpg!w1024_w?auth_key=2269214668-0-0-3fceae4c2e6277d5e29e65f8872bcd18">
        </div>

        <div class="category-btn-wrapper">
            <div class="btn" v-for="(btn,index) of btns"
                 :class="{'active': index == btnIndex}"
            @click="handleClick(index)">{{ btn.text }}</div>
        </div>
        <div class="content-wrapper">
            <div class="item" v-for="t of news">
                <div class="left">
                    <img :src="t.thumbnail_pic_s" alt="">
                </div>
                <div class="right">
                    <h1 class="title">{{t.title}}</h1>
                    <div class="text-wrapper">
                        <span class="category-text">{{t.category}}</span>
                        <span class="date-text">{{t.date}}</span>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
import axios from "axios"
export default {
    name: "category_news",
    data(){
        return{
            news:[],
            btns:[
                {
                    text:'体育',
                    paramText:'tiyu'
                },
                {
                    text:'国际',
                    paramText:'guoji'
                },
                {
                    text:'国内',
                    paramText:'guonei'
                }
            ],
            btnIndex:0

        }
    },
    methods:{
        handleClick(index){
            if(this.btnIndex!=index){
                this.btnIndex=index;
                this._initNews()
            }
        },
        _initNews(){
            axios.get('/juheNews',{
                params:{
                    key:"b9a9a27643a329b567b62fa166450b15",
                    type:this.btns[this.btnIndex].paramText
                }
            }).then(res =>{
                if(res.data.error_code ==0){
                    this.news=res.data.result.data;
                    console.log(this.news)

                }else {
                    alert("请求失败")
                }
            })
        }
    },
    created() {
        this._initNews()
    }
}
</script>

<style scoped lang="stylus">
.category
    .img-wrapper
        margin-top 10px
        width 100%
        height 200px
        img
            width 100%
            height 100%
    .category-btn-wrapper
        display flex
        flex-wrap wrap
        justify-content center
        .btn
            height 20px
            padding 0 6px
            margin 5px 10px
            line-height 22px
            border 1px solid #ff0036
            border-radius 10px
            color #ff0036
        .active
            background-color: #ff0036;
            color white
    .content-wrapper
        margin 10px
        .item
            display flex
            width 100%
            height 80px
            padding 0 4px
            border-bottom 1px dotted #2d3a4b
            .left
                width 80px
                height 80px
                img
                    width 100%
                    height 100%

            .right
                display flex
                flex-wrap wrap
                box-sizing border-box
                padding-left 15px
                align-content space-between
                .text-wrapper
                    margin-left:20px ;


</style>
